<script setup>
import { reactive } from 'vue';
import { goodlistApi } from "../../util/requrst"
const data = reactive({
  keyWord: "",
  searchParams: {
    // 查询参数
    query: "",
    // 默认配置一页
    pagenum: 1,
    // 一页显示5条
    pagesize: 5
  },
  total: 0,
  goodlist: [],


})
const searchList = () => {
  goodlistApi(data.searchParams).then(res => {
    if (res.data) {
      console.log("商品数据", res);
      data.goodlist = res.data.goods
      data.total = res.data.total
      console.log(data.goodlist);
    }
  })
}
const switchState = state => {
  switch (state) {
    case 0:
      return "未通过"
      break;
    case 1:
      return "审核中"
      break;
    case 2:
      return "已审核"
      break;
  }
}
// 方法初始化
searchList()

</script>

<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <!-- 面包屑结束 -->
      <div class="page_content">
        <div class="flex">
          <div class="input_box">
            <el-input v-model="data.searchParams.query" style="max-width: 600px" placeholder=" 请输入关键字"
              class="input-with-select">

              <template #append>
                <el-button @click="searchList"><el-icon>
                    <Search />
                  </el-icon></el-button>
              </template>


            </el-input>
          </div>

        </div>
        <!-- 表格 -->
        <!-- data要展示的数据 -->
        <!-- prop没条数据的对应属性 -->
        <!-- Lable列标题 -->
        <!-- scope.row相当于一条数据 -->
        <el-table :data="data.goodlist" style="width: 100%">
          <el-table-column prop="goods_name" label="商品名" />
          <el-table-column prop="goods_price" label="商品价格（￥）" />
          <el-table-column prop="goods_weight" label="商品重量（kg）" />
          <el-table-column prop="goods_state " label="商品状态">
            <template #default="scope">
              <p>{{ switchState(scope.row.goods_state) }}</p>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页栏 -->
        <el-pagination background layout="	prev, pager ,next, jumper" v-model:current-page="data.searchParams.pagenum"
          v-model:page-size="data.searchParams.pagesize" :page-sizes="[2, 3, 5, 6]" :total="data.total"
          @size-change="searchList" @current-change="searchList" class="changeLan" />
      </div>
    </el-breadcrumb>
  </div>
</template>

<style scoped>
.page_content {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  margin-top: 30px;
}

.flex {
  display: flex;
}

.input_box {
  margin-right: 10px;
}



.foot-button {
  margin-left: 432px;

}

.page_content>.changeLan {
  margin-left: 300px;

}
</style>